<template>
  <div class="login-wrapper">
    <!--<div class="pull-height animated" :style="{backgroundImage:'url('+url+')'}"
         style="background-size: 100% 100%">
    </div>-->
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 400px">
        <div slot="header" class="clearfix">
          <span>伴我汽车登录页面</span>
        </div>
        <table>
          <tr>
            <td>用户名:</td>
            <td>
              <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码:</td>
            <td>
              <el-input type="password" v-model="user.password" placeholder="请输入密码"
                        @keydown.enter.native="doLogin"></el-input>
            </td>
          </tr>
          <tr>
            <td>验证码:</td>
            <td>
              <el-input v-model="user.code" placeholder="请输入验证码" clearable
                        style="width:50%;" maxlength="4"/>
              <a href="javascript:void(0)" @click="createCode()">
                <img :src="verifitycode" style="width:30%;" alt="图片加载失败"/>
              </a>
            </td>
          </tr>
          <br/>
          <tr>
            <!-- 占两行-->
            <td colspan="2">
              <!-- 点击事件的两种不同的写法v-on:click和 @click-->
              <el-button style="width: 300px;margin-left: 20px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>

</template>
<style>
  .login-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(38, 50, 56, .6);
    /*background: url('src/assets/img/timg.jpg') no-repeat;*/
    background-size: 100% 100%;
  }
</style>
<script>
  const axios = require('axios')
  export default {
    data () {
      return {
        verifitycode: '',
        /*img: require('@/assets/img/timg.jpg'),*/
        user: {
          username: '',
          password: '',
          code: ''
        }
      }
    },
    methods: {
      doLogin () {
        axios.post('http://localhost:8080/sysUser/login', {
          username: this.user.username,
          password: this.user.password,
          code: this.user.code
        })
          .then(res => {
            if (res.data.code === '200') {
              this.$message({
                type: 'success',
                message: res.data.message
              })
              localStorage.setItem('username', res.data.data.username)
              this.$router.push({name: 'Home'})
            } else {
              this.$message({
                type: 'error',
                message: res.data.message
              })
            }
          })
      },
      // 获取验证码
      createCode () {
        // 二进制方式读取图片流  验证码
        this.$axios
          .get('http://localhost:8080/api/getCode', {
            responseType: 'arraybuffer'
          })
          .then(response => {
            return 'data:image/png;base64,' + btoa(
              new Uint8Array(response.data)
                .reduce((data, byte) => data + String.fromCharCode(byte), '')
            )
          })
          .then(data => {
            this.verifitycode = data
          })
      }
    },
    mounted () {
      // 相当于初始化
      this.createCode()
    }
  }
</script>
